<template>
  <div class="box">
    <Header />
    <div class="bottom banxin">
      <!-- 左边账户信息 -->
      <div class="left-information">
        <!-- 头像 -->
        <div class="information">
          <div class="information-first">
            <!-- <img src="../../assets/头像.jpg" alt="" /> -->
            <img
              v-if="username.picture"
              :src="`http://` + username.picture"
              alt="头像"
              @click="toPersoanlCenter"
            />
            <img
              v-else
              src="../../assets/头像.jpg"
              alt="头像"
              @click="toPersoanlCenter"
            />
            <span
              class="first-name"
              @click="toPersoanlCenter"
              style="cursor: pointer"
              >{{ username.username }}</span
            >
            <span class="first-age">码龄1年</span>
          </div>
          <div class="information-second">
            <span><span>56</span><span class="color">原创</span></span>
            <span><span>320</span><span class="color">周排名</span></span>
            <span><span>1万+</span><span class="color">总排名</span></span>
            <span><span>1万+</span><span class="color">访问</span></span>
            <span><span>2</span><span class="color">等级</span></span>
          </div>
          <div class="information-three">
            <span><span>2022</span><span class="color">积分</span></span>
            <span><span>1900</span><span class="color">粉丝</span></span>
            <span><span>604</span><span class="color">获赞</span></span>
            <span><span>874</span><span class="color">评论</span></span>
            <span><span>652</span><span class="color">收藏</span></span>
          </div>
          <div class="information-function" v-if="this.artic.uid !== uid">
            <el-button
              round
              @click="getAttention(username.uid)"
              v-if="isAttention"
              >关注</el-button
            >
            <el-button round v-else @click="cancelAttention(username.uid)"
              >取消关注</el-button
            >
            <el-button round>私信</el-button>
          </div>
        </div>
        <!-- 搜博主文章 -->
        <div class="search">
          <input type="text" placeholder="搜博主文章" />
          <span class="search-ico"></span>
        </div>
        <!-- 热门文章 -->
        <div class="popular-articles">
          <h3 class="hot-title">热门文章</h3>
          <ul>
            <li v-for="(item, id) in popular_articles" :key="id">
              <span>{{ item.title }}</span>
              <span class="hot-view">{{ item.views }}</span>
            </li>
          </ul>
        </div>
      </div>
      <!-- 右边博客详情 -->
      <div class="detailed">
        <!-- 博客标题 -->
        <h1 class="title">{{ artic.article_title }}</h1>
        <div class="top-describe">
          <p class="publish">
            <!-- 文章类型，原创or转载 -->
            <span class="article-type">{{ article_type }}</span>
            <!-- 用户昵称 -->
            <span class="name">{{ username.username }}</span>
            <!-- 发布事件 -->
            <span class="time">{{ timeDetal(artic.article_createtime) }}</span>
            <!-- 浏览量 -->
            <span class="num">{{ artic.article_view_count }}</span>
            <!-- 收藏量 -->
            <span class="collection">{{ artic.article_collection_count }}</span>
            <span
              class="editor"
              @click="editor"
              v-if="username.uid == uid && artic.article_status !== 3"
              >编辑</span
            >
          </p>
          <!-- 文章标签和类型 -->
          <div class="article">
            <ul class="classify">
              文章标签:
              <li v-for="(item, tag_id) in label" :key="tag_id">
                {{ item.tag_name }}
              </li>
            </ul>
            <ul class="label">
              分类:
              <li v-for="(item, category_id) in classify" :key="category_id">
                {{ item }}
              </li>
            </ul>
          </div>
        </div>
        <!-- 博客正文 -->
        <div
          class="blog-details"
          v-html="artic.article_content"
          style="white-space: pre-wrap"
        ></div>
        <!-- 博客下面点赞收藏评论栏 -->
        <div class="bottom-like" v-if="artic.article_status == 1">
          <div>
            <div class="bottom-portrait-head">
              <img
                v-if="username.picture"
                :src="`http://` + username.picture"
                alt=""
                @click="toPersoanlCenter"
              />
              <img
                v-else
                src="../../assets/头像.jpg"
                alt=""
                @click="toPersoanlCenter"
              />
            </div>
            <p
              class="bottom-username"
              @click="toPersoanlCenter"
              style="cursor: pointer"
            >
              {{ username.username }}
            </p>
          </div>

          <div>
            <ul>
              <!-- 点赞 -->
              <li ref="like" @click="givelike" :style="{ color: likeColor }">
                <!--用来显示生成的飘动的心 -->
                <!-- <canvas id="cvs"></canvas> -->
                <span>{{ artic.article_like_count }}</span>
              </li>
              <!-- 评论 -->
              <li ref="comment" :style="{ color: commentColor }">
                <span>{{ commentCount }}</span>
              </li>
              <!-- 收藏 -->
              <li
                ref="collection"
                @click="collect"
                :style="{ color: collectionColor }"
              >
                <span>{{ artic.article_collection_count }}</span>
              </li>
            </ul>
          </div>
        </div>
        <!-- 评论 -->
        <div style="margin-top: 25px" v-if="artic.article_status == 1">
          <Comments
            :article="artic.article_id"
            :uid="username.uid"
            :userId="uid"
          />
        </div>
        <!-- 底部点赞评论收藏定位 -->
        <div class="bottom-collection">
          <div>
            <div class="bottom-portrait">
              <img src="../../assets/头像.jpg" alt="" />
            </div>
            <p class="bottom-name">靠技术吃饭</p>
          </div>
          <div>
            <ul>
              <li><span>1</span></li>
              <li><span>1</span></li>
              <li><span>1</span></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 引入导航栏
import Header from "../../components/Header.vue";
// 引入混入
import { mixin } from "../../mixin";
//引入防抖
import { debounce } from "../../api/debounce/debounce";
import Comments from "../../pages/blog/Comments.vue";
export default {
  name: "BlogDetails",
  components: {
    Header,
    Comments,
  },
  data() {
    return {
      artic: [], // 博客详情
      username: [], // 博主信息
      label: [], // 标签
      classify: [], // 博客分类
      timer: "", // 点赞时间
      article_type: "", // 文章类型 原创or转载
      uid: "", //用户id
      likeColor: "", //点赞颜色
      collectionColor: "", //收藏颜色
      isAttention: true, //用户时候被关注
      commentCount: 0, //评论数据
      commentColor: "", //评论颜色
      // 热门文章
      popular_articles: [
        {
          id: 1,
          title: "轮播图的实现", //文章标题
          views: 2436, //浏览量
        },
        {
          id: 1,
          title: "轮播图的实现— JavaScript", //文章标题
          views: 2436, //浏览量
        },
        {
          id: 1,
          title: "轮播图的实现", //文章标题
          views: 2436, //浏览量
        },
        {
          id: 1,
          title: "轮播图的实现 — jQuery", //文章标题
          views: 2436, //浏览量
        },
        {
          id: 1,
          title: "轮播图的实现", //文章标题
          views: 2436, //浏览量
        },
        {
          id: 1,
          title: "项目是这个阶段中", //文章标题
          views: 2436, //浏览量
        },
        {
          id: 1,
          title: "轮播图的实现", //文章标题
          views: 2436, //浏览量
        },
        {
          id: 1,
          title: "的说法苏科大文化封杀  ", //文章标题
          views: 2436, //浏览量
        },
        {
          id: 1,
          title: "冲那次", //文章标题
          views: 2436, //浏览量
        },
      ],
    };
  },
  //混入，引入时间戳处理函数
  mixins: [mixin],
  methods: {
    // 编辑博客
    editor() {
      this.$router.push({
        name: "WriteBlog",
        query: {
          id: this.artic.article_id,
        },
      });
    },
    // 点赞
    givelike: debounce(
      function () {
        // 连接接口
        // 判断是否已经点赞
        this.$http({
          method: "post",
          url: "article/likeCountIn",
          params: {
            article_id: this.$route.query.itemid, //博客id
          },
        }).then(({ data }) => {
          console.log(data);
          if (data.flag) {
            // 如果已经点赞了下次点击为取消点赞
            this.$http({
              methods: "post",
              url: "article/unlikeCount",
              params: {
                article_id: this.artic.article_id, //博客id
              },
            }).then(({ data }) => {
              if (data.flag) {
                console.log("flag", data);
                // data为假点赞数-1,图标变色
                this.artic.article_like_count =
                  this.artic.article_like_count - 1;
                this.$refs.like.style.color = "#615656";
                console.log("取消点赞");
              }
            });
          } else {
            // 如果没有点赞下次点击为点赞
            this.$http({
              methods: "post",
              url: "article/likeCount",
              params: {
                article_id: this.artic.article_id, //博客id
              },
            }).then(({ data }) => {
              if (data.flag) {
                this.artic.article_like_count =
                  this.artic.article_like_count + 1;
                this.$refs.like.style.color = "red";
              }
            });
          }
        });
      },
      20,
      true
    ),
    // 收藏
    collect: debounce(
      function () {
        // 判断是否已经收藏
        this.$http({
          method: "post",
          url: "article/favoriteArticleIn",
          params: {
            article_id: this.$route.query.itemid, //博客id
          },
        }).then(({ data }) => {
          console.log("我是收藏", data);
          if (data.flag) {
            // 如果已经收藏了图标变红
            this.$http({
              methods: "post",
              url: "article/unfavoriteArticle",
              params: {
                article_id: this.artic.article_id, //博客id
              },
            }).then(({ data }) => {
              if (data.flag) {
                this.artic.article_collection_count =
                  this.artic.article_collection_count - 1;
                this.$refs.collection.style.color = "#615656";
              }
            });
          } else {
            // 如果没有收藏图标变灰
            this.$http({
              methods: "post",
              url: "article/favoriteArticle",
              params: {
                article_id: this.artic.article_id, //博客id
              },
            }).then(({ data }) => {
              if (data.flag) {
                this.artic.article_collection_count =
                  this.artic.article_collection_count + 1;
                this.$refs.collection.style.color = "red";
              }
            });
          }
        });
      },
      20,
      true
    ),
    //点击跳转其他人的主页
    toPersoanlCenter() {
      this.$router.push({
        name: "PersonalCenter",
        query: {
          id: this.username.uid,
        },
      });
    },
  },
  mounted() {
    // 有博客id则显示博客详情
    if (this.$route.query.itemid) {
      this.$http({
        method: "post",
        url: "article/viewArticle",
        params: {
          article_id: this.$route.query.itemid, //博客id,路由传过来的query值
        },
      }).then(({ data }) => {
        // console.log("我是博客详情", data);
        this.artic = data.data.article; //博客信息
        this.username = data.data.user; //用户信息
        //关注回显
        this.showAttentionStatus(this.username.uid);
        this.label = data.data.tags; //博客标签
        this.classify.push(data.data.category.categoryThird.category_name);
        this.classify.push(data.data.category.categorySecond.category_name);
        this.classify.push(data.data.category.categoryFirst.category_name);
        console.log(this.classify);
        // 判断该博客发表类型转载or原创
        if (this.artic.original_or_reprint) {
          this.article_type = "原创";
        } else {
          this.article_type = "转载";
        }
        //读取登录用户的uid
        this.uid = JSON.parse(
          sessionStorage.getItem("LoginMessage")
        ).message.uid;
      });
      // 页面加载之前判断是否已经点赞
      this.$http({
        method: "post",
        url: "article/likeCountIn",
        params: {
          article_id: this.$route.query.itemid, //博客id
        },
      }).then(({ data }) => {
        if (data.flag) {
          // 如果已经点赞了图标变红
          this.likeColor = "red";
        } else {
          this.likeColor = "#615656";
        }
      });
      // 页面加载之前判断是否收藏
      this.$http({
        method: "post",
        url: "article/favoriteArticleIn",
        params: {
          article_id: this.$route.query.itemid, //博客id
        },
      }).then(({ data }) => {
        if (data.flag) {
          // 如果已经收藏了图标变红
          this.collectionColor = "red";
        } else {
          // 如果没有收藏图标变灰
          this.collectionColor = "#615656";
        }
      });
      //评论数量数量加载
      // this.getCommentNumber();
      this.$bus.$on("getCommentNumber", (data) => {
        this.commentCount = data;
      });
    }
  },
  watch: {
    commentCount() {
      if (this.commentCount > 0) {
        this.commentColor = "red";
      } else {
        this.commentColor = "#615656";
      }
    },
  },

  beforeDestroy() {
    this.$bus.$off("getCommentNumber");
  },
};
</script>

<style scoped>
.bottom {
  display: flex;
  margin-top: 30px;
}
/* 左边账户信息 */
.bottom .left-information {
  margin-bottom: 20px;
  margin-right: 20px;
  flex: 3;
}
/* 博主详细信息 */
.information,
.search,
.popular-articles {
  position: relative;
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 0 10px 0px rgb(219, 218, 218);
  margin-bottom: 20px;
}
/* 头像、昵称、码龄 */
.information-first > img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.first-name {
  font-size: 25px;
  position: absolute;
  left: 140px;
  top: 40px;
  color: #615656;
}
.first-age {
  position: absolute;
  left: 140px;
  top: 80px;
  color: #615656;
}
/* 原创、排名、访问、等级 */
/* 积分、粉丝、获赞、评论、收藏 */
.information-second,
.information-three {
  color: #4a4d52;
  display: flex;
  text-align: center;
  border-bottom: 1px solid rgb(226, 224, 224);
  margin-top: 10px;
}
.information-second span,
.information-three span {
  margin-bottom: 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.information-three {
  border: 0;
}
.color {
  color: #696767;
  font-size: 18px;
}
/* 搜博主自己的文章 */
.search {
  height: 50px;
  text-align: center;
}
.search input {
  height: 100%;
  width: 310px;
  border-radius: 10px;
  outline: none;
  border: 0;
  background: #f1eeee;
  font-size: 20px;
  padding: 0 20px;
}
.search-ico {
  background-color: rgb(200, 201, 202);
  display: block;
  height: 50px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  width: 50px;
  position: absolute;
  right: 20px;
  top: 20px;
  cursor: pointer;
}
.search-ico::before {
  /* 想使用的icon的十六制编码，去掉&#x之后的 */
  content: "\e858";
  /* 必须加 */
  font-family: "iconfont";
  line-height: 50px;
  font-size: 25px;
  color: #636262;
}
/* 热门文章 */
.popular-articles {
  padding: 0;
  font-size: 20px;
  color: rgb(107, 104, 104);
}
.hot-title {
  color: rgb(104, 102, 102);
  margin-bottom: 20px;
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
  background-color: #f5f5f5;
}
.popular-articles ul {
  padding: 0px 20px;
  cursor: pointer;
}
.popular-articles ul li {
  padding-bottom: 20px;
}
.hot-view {
  margin: 0 25px;
  font-size: 16px;
  color: #b8b8bb;
}
.hot-view::before {
  /* 想使用的icon的十六制编码，去掉&#x之后的 */
  content: "\e62b";
  /* 必须加 */
  font-family: "iconfont";
  margin-right: 5px;
  font-size: 20px;
}
/* 右边博客详情 */
.bottom .detailed {
  margin-bottom: 20px;
  box-sizing: border-box;
  flex: 7;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 0 10px 0px rgb(219, 218, 218);
  padding: 20px 30px;
}
.top-describe {
  background-color: #f8f8f8;
  padding: 0px 20px 10px;
  border-radius: 10px;
}
/* 标题发布时间浏览量收藏数等 */
.bottom .detailed .publish {
  margin-top: 30px;
  padding-top: 10px;
  color: #999aaa;
}
.bottom .detailed .publish span {
  margin-right: 25px;
}
.bottom .detailed .publish .article-type {
  font-size: 16px;
  display: inline-block;
  width: 50px;
  text-align: center;
  border-radius: 5px;
  color: #0c0b0d87;
  background-color: rgba(135, 206, 235, 0.5);
}
.bottom .detailed .publish .name {
  font-size: 20px;
  margin-right: 40px;
  color: #4a4d52;
}
.bottom .detailed .publish .editor {
  margin-top: 10px;
  float: right;
  cursor: pointer;
}
.bottom .detailed .publish .editor:hover {
  color: red;
}
/* 分类,文章标签 */
.article {
  margin-top: 10px;
}
.article ul {
  color: #999aaa;
  font-size: 15px;
  display: inline-block;
  margin: 10px 10px 10px 0;
}
.classify > li,
.label > li {
  font-size: 14px;
  display: inline-block;
  margin: 0 10px 0 5px;
  color: rgb(60, 140, 206);
  box-shadow: 0 0 5px 0px rgb(219, 218, 218);
  background-color: #fff;
  padding: 1px 10px;
  border-radius: 2px;
}

/* 内容 */
.bottom .detailed .blog-details {
  margin-top: 20px;
  width: 100%;
  padding: 20px 20px;
  box-sizing: border-box;
}

.time::before {
  /* 想使用的icon的十六制编码，去掉&#x之后的 */
  content: "\e8c5";
  /* 必须加 */
  font-family: "iconfont";
  margin-right: 5px;
  font-size: 18px;
}
.num::before {
  /* 想使用的icon的十六制编码，去掉&#x之后的 */
  content: "\e62b";
  /* 必须加 */
  font-family: "iconfont";
  margin-right: 5px;
  font-size: 18px;
}
.collection::before {
  /* 想使用的icon的十六制编码，去掉&#x之后的 */
  content: "\e69e";
  /* 必须加 */
  font-family: "iconfont";
  margin-right: 5px;
  font-size: 18px;
}

/* 底部点赞评论收藏 */
.bottom-like {
  margin-top: 30px;
  position: relative;
  height: 80px;
  background-color: #fff;
  box-shadow: 0 0 10px 0px rgb(219, 218, 218);
}
.bottom-portrait-head {
  display: inline-block;
  width: 60px;
  height: 60px;
  background-color: #fff;
  border-radius: 50%;
  overflow: hidden;
  margin: 10px 0 0 20px;
}
.bottom-portrait-head > img {
  width: 100%;
  height: 100%;
}
.bottom-username {
  display: inline-block;
  font-size: 25px;
  font-weight: 700;
  position: absolute;
  line-height: 80px;
  left: 100px;
}
.bottom-like ul {
  position: absolute;
  right: 0px;
  top: 35px;
}
.bottom-like ul li {
  float: left;
  font-size: 20px;
  margin-right: 20px;
  color: #615656;
  cursor: pointer;
}
.bottom-like ul li:nth-child(1)::before {
  /* 想使用的icon的十六制编码，去掉&#x之后的 */
  content: "\ec7f";
  /* 必须加 */
  font-family: "iconfont";
  margin-right: 3px;
  font-size: 20px;
}
.bottom-like ul li:nth-child(2)::before {
  /* 想使用的icon的十六制编码，去掉&#x之后的 */
  content: "\e8b9";
  /* 必须加 */
  font-family: "iconfont";
  margin-right: 3px;
  font-size: 20px;
}
.bottom-like ul li:nth-child(3)::before {
  /* 想使用的icon的十六制编码，去掉&#x之后的 */
  content: "\e69e";
  /* 必须加 */
  font-family: "iconfont";
  margin-right: 3px;
  font-size: 20px;
}

/* 底部点赞评论收藏定位 */
.bottom-collection {
  display: none;
  height: 100px;
  width: 996px;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  right: 88px;
  box-shadow: 0 0 10px 0px rgb(219, 218, 218);
}
.bottom-portrait {
  display: inline-block;
  width: 80px;
  height: 80px;
  background-color: #fff;
  border-radius: 50%;
  overflow: hidden;
  margin: 10px 0 0 20px;
}
.bottom-portrait > img {
  width: 100%;
  height: 100%;
}
.bottom-name {
  display: inline-block;
  font-size: 30px;
  font-weight: 700;
  position: absolute;
  top: 30px;
  left: 120px;
}
.bottom-collection ul {
  position: absolute;
  right: 70px;
  top: 35px;
}
.bottom-collection ul li {
  float: left;
  font-size: 20px;
  margin-right: 60px;
  color: #615656;
  cursor: pointer;
}
.bottom-collection ul li:nth-child(1)::before {
  /* 想使用的icon的十六制编码，去掉&#x之后的 */
  content: "\ec7f";
  /* 必须加 */
  font-family: "iconfont";
  margin-right: 5px;
  font-size: 32px;
}
.bottom-collection ul li:nth-child(2)::before {
  /* 想使用的icon的十六制编码，去掉&#x之后的 */
  content: "\e8b9";
  /* 必须加 */
  font-family: "iconfont";
  margin-right: 5px;
  font-size: 30px;
}
.bottom-collection ul li:nth-child(3)::before {
  /* 想使用的icon的十六制编码，去掉&#x之后的 */
  content: "\e69e";
  /* 必须加 */
  font-family: "iconfont";
  margin-right: 5px;
  font-size: 32px;
}
.bottom-collection ul li:nth-child(2) {
  margin-top: 4px;
}
</style>
<style lang="less" scoped>
.information-function {
  text-align: center;
  /deep/ .el-button.is-round {
    padding: 8px 40px;
    letter-spacing: 3px;
    margin-right: 20px;
  }
}
</style>